<template>
  <div>
<!--    <el-row type="flex" justify="space-around">-->
<!--      <el-col type="flex" :span="4">-->
<!--        <el-form :inline="true" :model="abnormalRecord" class="demo-form-inline" style="margin-top: 20px">-->
<!--          <el-form-item required>-->
<!--            <el-radio style="width: 100px;margin-left: 30px" v-model="abnormalRecord.type" :label="1" border @change="typeChange">级别类</el-radio>-->
<!--            <el-radio style="width: 100px" v-model="abnormalRecord.type" :label="2" border @change="typeChange">阈值类</el-radio>-->
<!--          </el-form-item>-->
<!--        </el-form>-->
<!--      </el-col>-->
<!--    </el-row>-->
    <!-- 机组框 -->
<!--    <el-row type="flex" justify="space-around">-->
<!--      <el-col :span="spanLength" v-for='machine in machineList' :key="machine.name">-->
<!--        <dv-border-box-11  :title="machine.name" :color="['rgb(29,193,245)','rgb(25,202,173)']" backgroundColor="rgba(190,231,233,0.1)" >-->
<!--          <div id="box1" >-->
<!--            <div id="con1" ref="con1" :class="{anim:animate==true}" @mouseenter="mEnter(machine.name)" @mouseleave="mLeave(machine.name)">-->
<!--                <p v-for='alarm in machine.data' :key="alarm.id" style="font-size: 14px;padding:20px 0;">-->
<!--                  时间：{{alarm.create_time}}-->
<!--                  id：{{alarm.id}}-->
<!--                <br>&nbsp;异常：{{alarm.descriptor}}-->
<!--                </p>-->
<!--            </div>-->
<!--          </div>-->
<!--        </dv-border-box-11>-->
<!--      </el-col>-->
<!--    </el-row>-->
    <div class="content-body">
      <div class="content-container" v-for='machine in machineList' :key="machine.name">
        <dv-border-box-11  :title="machine.name" :color="['rgb(29,193,245)','rgb(25,202,173)']" backgroundColor="rgba(190,231,233,0.1)" >
          <div id="box1" >
            <div id="con1" ref="con1" :class="{anim:animate==true}" @mouseenter="mEnter(machine.name)" @mouseleave="mLeave(machine.name)">
              <p v-for='alarm in machine.data' :key="alarm.id" style="font-size: 14px;">
                时间：{{alarm.create_time}}
<!--                id：{{alarm.id}}-->
                <br>&nbsp;异常：{{alarm.descriptor}}
              </p>
            </div>
          </div>
        </dv-border-box-11>
      </div>
    </div>
  </div>
</template>
<script>
import request from '../../network/request'
export default {
  name: 'index',
  data () {
    return {
      // animate: false,
      animates: [],
      latestIdList: [],
      // machineList: [{
      //   name: '',
      //   data: [{}]
      // }],
      machineList: [],
      spanLength: 8,
      timers: []
      // config: {
      //   header: ['create_create_time', 'descriptor'],
      //   data: [
      //     ['2021-05-10 10:10:10', 'aaaaaaaaa'],
      //     ['2021-05-10 10:10:10', 'bbbbbbbbb'],
      //     ['2021-05-10 10:10:10', 'ccccccccc'],
      //     ['2021-05-10 10:10:10', 'ddddd'],
      //     ['2021-05-10 10:10:10', 'eeeeee'],
      //     ['2021-05-10 10:10:10', 'ffffffff'],
      //     ['2021-05-10 10:10:10', 'ggggggg'],
      //     ['2021-05-10 10:10:10', 'hhhhhh'],
      //     ['2021-05-10 10:10:10', 'iiiiii'],
      //     ['2021-05-10 10:10:10', 'jjjjjjjj'],
      //     ['2021-05-10 10:10:10', 'kkkkk'],
      //     ['2021-05-10 10:10:10', 'llllll'],
      //     ['2021-05-10 10:10:10', 'mmmmmmm'],
      //     ['2021-05-10 10:10:10', 'nnnnnnnnn']
      //   ],
      //   rowNum: 10,
      //   align: ['center', 'center']
      // },
      // abnormalRecord: {
      //   type: 1,
      //   firstLatestId: -1
      // }
    }
  },
  created () {
    // eslint-disable-next-line no-undef
    this.getRecords()
    // this.getSpanLength()
    // console.log('created长度: ' + this.machineList.length)
    // this.getTimers()
  },
  mounted () {
    // this.getTimers()
    // console.log('mounted长度: ' + this.machineList.length)
  },
  beforeDestroy () {
    for (let i = 0; i < this.timers.length; i++) {
      clearInterval(this.timers[i])
    }
  },
  methods: {
    getRecords () {
      // console.log('调用接口getRecords')
      var that = this
      request({
        method: 'POST',
        url: '/dataOp/getClassOneAlarm',
        data: {
          id: -1
        }
      }).then(res => {
        /**
         * 接新告警
         */
        // console.log('getRecords.res.data.data.ClassOneAlarm:', res.data.data.ClassOneAlarm)
        // console.log('getRecords.res.data.data.ClassOneAlarm.\'2机组\':', res.data.data.ClassOneAlarm['2机组'])
        // console.log('length:', Object.keys(res.data.data.ClassOneAlarm).length)
        // console.log('截取前：1length', res.data.data.ClassOneAlarm.length)
        var oriObj = res.data.data.ClassOneAlarm
        if (Object.keys(oriObj).length !== 0) {
          for (const name of Object.getOwnPropertyNames(oriObj)) {
            // console.log('name:', name)
            // console.log('oriObj[name].length:', oriObj[name].length)
            if (oriObj[name].length !== 0) {
              var alarmList = oriObj[name]
              var newList = []
              if (alarmList.length > 50) {
                alarmList = alarmList.slice(-50)
              }
              for (let i = 0; i < alarmList.length; i++) {
                newList.push(alarmList[i])
              }
              that.machineList.push({
                name: name,
                data: JSON.parse(
                  JSON.stringify(newList)
                )
              })
              that.latestIdList.push({
                name: name,
                latestId: parseInt(alarmList.slice(-1)[0].id)
              })
            } else {
              if (oriObj[name].length === 0) {
                var nowDatetime = that.getDatetime()
                that.machineList.push({
                  name: name,
                  data: [{
                    id: 0,
                    descriptor: '没有新数据',
                    create_time: nowDatetime
                  }]
                })
                that.latestIdList.push({
                  name: name,
                  latestId: 1
                })
              }
            }
            // console.log('machineList.length:', that.machineList.length)
          }
          // that.parseArr(res.data.data.ClassOneAlarm)
          // console.log('machineList:', that.machineList)
          // console.log('machineList.length:', that.machineList.length)
        } else {
          if (Object.keys(res.data.data.ClassOneAlarm).length === 0) {
            // console.log('没有机器')
          }
        }
        // console.log('函数里machineList: ' + that.machineList.length)
        that.getTimers()
        // console.log('latestIdList：', that.latestIdList)
        // console.log('length', res.data.data.ClassOneAlarm.length)
        // console.log('type', typeof (res.data.data.ClassOneAlarm[0]))
        // console.log('返回几条：', length(res.data.data))
        // that.firstLevelAlarms.push(res.data.data)
      }).catch((error) => {
        console.log('异常: ' + error)// 异常
      })
    },
    getNewRecords (name) {
      this.getInterruptMsg()
      // console.log('要新数据:', name)
      var that = this
      for (let i = 0; i < that.timers.length; i++) {
        if (that.timers[i].name === name) {
          var latestID = that.latestIdList[i].latestId
        }
      }
      request({
        method: 'POST',
        url: '/dataOp/getAlarmClassByGroup',
        data: {
          id: latestID,
          alarmGroup: name
        }
      }).then(res => {
        /**
         * 接新告警
         */
        // console.log('getNewRecords:', res.data.data)
        if (res.data.data.abdata.length !== 0) {
          if (res.data.data.abdata.length > 50) {
            res.data.data.abdata = res.data.data.abdata.slice(-50)
            // console.log('截取后：length', res.data.data.abdata.length)
          }
          // console.log('machineList[0]：', that.machineList[0])
          for (let i = 0; i < that.machineList.length; i++) {
            if (that.machineList[i].name === name) {
              for (let j = 0; j < res.data.data.abdata.length; j++) {
                that.machineList[i].data.push(res.data.data.abdata[j])
                that.latestIdList[i].latestId = parseInt(res.data.data.abdata[j].id)
              }
            }
            if (that.machineList[i].data[0].id === 0) {
              that.machineList[i].data.shift()
            }
          }
        } else {
          // console.log('res.data.data.abdata.length:', res.data.data.abdata.length)
          for (let i = 0; i < that.machineList.length; i++) {
            if (that.machineList[i].name === name) {
              // console.log('that.machineList[i].data.length:', that.machineList[i].data.length)
              if (that.machineList[i].data.length === 0) {
                // console.log('23333：')
                var nowDatetime = that.getDatetime()
                that.machineList[i].data.push(
                  {
                    id: 0,
                    descriptor: '没有新数据',
                    create_time: nowDatetime
                  }
                )
              }
              // console.log('没有新数据')
            }
          }
        }
      }).catch((error) => {
        console.log('异常: ' + error)// 异常
      })
    },
    // 是否中断
    getInterruptMsg () {
      request({
        method: 'POST',
        url: '/dataOp/judgeInterupt'
      }).then(r => {
        if (r.data.message !== '数据源连接正常') {
          this.$alert('数据源中断', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          })
        }
      })
    },
    getTimers () {
      var that = this
      // console.log('getTimers里machineList长度为: ' + that.machineList.length)
      for (let i = 0; i < that.machineList.length; i++) {
        that.timers.push({
          name: that.machineList[i].name,
          timer: setInterval(function () { that.scroll(that.machineList[i].name) }, 1000)
        })
        // console.log('调用了获取timer' + that.timers[i].name)
        that.animates.push({
          name: that.machineList[i].name,
          state: false
        })
      }
      // console.log('timers: ' + that.timers.length)
      // console.log('animates: ' + that.animates[0].state)
    },
    scroll (name) {
      // eslint-disable-next-line no-unused-vars
      // const con1 = this.$refs.con1
      // console.log('调用了scroll')
      // console.log('name', name)
      var that = this // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
      // this.animate = !this.animate
      for (let i = 0; i < that.machineList.length; i++) {
        if (that.machineList[i].name === name) {
          that.animates[i].state = !that.animates[i].state
        }
      }
      setTimeout(function () {
        // console.log('firstLevelAlarms.length:', that.firstLevelAlarms.length)
        // }
        // that.firstLevelAlarms.push(that.firstLevelAlarms[0]) // 把第一条数据补到末尾
        for (let i = 0; i < that.machineList.length; i++) {
          if (that.machineList[i].name === name) {
            if (that.machineList[i].data.length <= 10) {
              that.getNewRecords(name)
              // console.log('更新了')
            }
            // console.log('that.machineList[i].data.length:', that.machineList[i].data.length)
            if (that.machineList[i].data.length !== 0) {
              if (that.machineList[i].data[0].id !== 0 && that.machineList[i].data.length > 10) {
                that.machineList[i].data.shift()// 向前滚动一条
              }
            }
          }
          // console.log(that.machineList.length)
        }
        // that.animate = !that.animate // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
        for (let i = 0; i < that.machineList.length; i++) {
          if (that.machineList[i].name === name) {
            that.animates[i].state = !that.animates[i].state
          }
        }
      }, 1000)
    },
    mEnter (name) {
      var that = this
      for (let i = 0; i < that.timers.length; i++) {
        if (that.timers[i].name === name) {
          clearInterval(that.timers[i].timer)
          // console.log('clearInterval' + that.timers[i].name)
        }
      }
    },
    mLeave (name) {
      var that = this
      for (let i = 0; i < that.timers.length; i++) {
        if (that.timers[i].name === name) {
          that.timers[i].timer = setInterval(function () { that.scroll(name) }, 1000)
          // console.log('setInterval' + that.timers[i].name)
        }
      }
    },
    getDatetime () {
      var now = new Date()
      var year = now.getFullYear()
      var month = now.getMonth() + 1
      var day = now.getDate()
      var hh = now.getHours()
      var mm = now.getMinutes()
      var ss = now.getSeconds()
      var clock = year + '-'
      if (month < 10) { clock += '0' }
      clock += month + '-'
      if (day < 10) { clock += '0' }
      clock += day + ' '
      if (hh < 10) { clock += '0' }
      clock += hh + ':'
      if (mm < 10) clock += '0'
      clock += mm + ':'
      if (ss < 10) clock += '0'
      clock += ss
      // console.log('clock:', clock)
      return clock
    }
  }
}
</script>

<style scoped>
  *{
    margin: 0 ;
    padding: 0;
  }
  #box1{
    width: 80%;
    height: 480px;
    line-height: 30px;
    overflow: hidden;
    padding-left: 30px;
    border: 0px solid #D3DCE6;
    transition: all 0.5s;
    margin-left:2%;
    border-radius:5px;
    padding-top: 70px;
    margin-top:20px;
  }
  #con1 li{
    list-style: none;
    line-height: 50px;
    height: 50px;
    overflow: auto;
  }
  .content-body {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-flow: wrap;
  }
  .content-container {
    width: 33%;
  }
</style>
